<template>
  <div class="property-management-guide">
    <a-modal
      :open="visible"
      title="属性管理使用指南"
      width="800px"
      @cancel="handleClose"
      :footer="null"
    >
      <div class="guide-content">
        <div class="guide-sections">
          <section class="guide-section">
            <h3>📋 属性管理概述</h3>
            <p>属性管理系统支持多领域属性配置，满足不同业务场景的需求：</p>
            <a-row :gutter="16" style="margin-top: 16px">
              <a-col :span="6">
                <a-card size="small" class="domain-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:shop-outlined" />
                    业务领域
                  </template>
                  <p>价格、房型、设施等业务属性</p>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" class="domain-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:setting-outlined" />
                    运营领域
                  </template>
                  <p>渠道、库存、合作方等运营属性</p>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" class="domain-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:code-outlined" />
                    技术领域
                  </template>
                  <p>版本、API、环境等技术属性</p>
                </a-card>
              </a-col>
              <a-col :span="6">
                <a-card size="small" class="domain-card">
                  <template #title>
                    <IconifyIcon icon="ant-design:safety-outlined" />
                    合规领域
                  </template>
                  <p>资质、合规、隐私等合规属性</p>
                </a-card>
              </a-col>
            </a-row>
          </section>

          <section class="guide-section">
            <h3>⚙️ 属性配置指南</h3>

            <h4>创建属性字段</h4>
            <a-steps direction="vertical" size="small">
              <a-step
                title="选择领域"
                description="选择要配置的属性领域（业务/运营/技术/合规）"
              />
              <a-step
                title="添加字段"
                description="点击'添加字段'按钮创建新的属性字段"
              />
              <a-step
                title="配置字段"
                description="设置字段名称、类型、验证规则等"
              />
              <a-step title="保存配置" description="保存字段配置并应用到资源" />
            </a-steps>

            <h4 style="margin-top: 24px">字段类型说明</h4>
            <a-descriptions :column="2" bordered size="small">
              <a-descriptions-item label="文本 (text)">
                用于存储字符串类型的数据
              </a-descriptions-item>
              <a-descriptions-item label="数字 (number)">
                用于存储数值类型的数据
              </a-descriptions-item>
              <a-descriptions-item label="选择 (select)">
                用于从预定义选项中选择
              </a-descriptions-item>
              <a-descriptions-item label="日期 (date)">
                用于存储日期时间信息
              </a-descriptions-item>
              <a-descriptions-item label="布尔 (boolean)">
                用于存储是/否类型的数据
              </a-descriptions-item>
              <a-descriptions-item label="对象 (object)">
                用于存储复杂的数据结构
              </a-descriptions-item>
            </a-descriptions>
          </section>

          <section class="guide-section">
            <h3>💡 最佳实践</h3>

            <a-alert
              message="字段命名规范"
              description="使用清晰、描述性的字段名称，避免使用缩写或特殊字符"
              type="info"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-alert
              message="验证规则设置"
              description="为重要字段设置适当的验证规则，确保数据质量"
              type="warning"
              show-icon
              style="margin-bottom: 16px"
            />

            <a-alert
              message="领域分离"
              description="将不同业务领域的属性分开管理，便于维护和扩展"
              type="success"
              show-icon
            />
          </section>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { IconifyIcon } from '@vben/icons';

// Props
interface Props {
  visible: boolean;
}

const props = defineProps<Props>();

// Emits
const emit = defineEmits<{
  close: [];
}>();

// 方法
const handleClose = () => {
  emit('close');
};
</script>

<style lang="less" scoped>
.property-management-guide {
  .guide-content {
    max-height: 600px;
    overflow-y: auto;

    .guide-sections {
      .guide-section {
        margin-bottom: 32px;

        h3 {
          color: #1890ff;
          border-bottom: 2px solid #1890ff;
          padding-bottom: 8px;
          margin-bottom: 16px;
        }

        h4 {
          color: #333;
          margin-bottom: 12px;
        }

        .domain-card {
          .ant-card-head-title {
            display: flex;
            align-items: center;
            gap: 8px;
          }
        }
      }
    }
  }
}
</style>
